/**
 * @Description:这是附近站点列表的组件.包含了所有的站点列表,外部由slick组件包裹,支持侧滑切换
 * @author tao.xie
 * @date 2019-07-19 16:38
*/
<template>
  <slick
    :options="slickOptions"
    style="width:10rem;height:6.08rem"
    ref="slick"
    v-if="show"
    @afterChange="handleAfterChange"
    @init="handleInit"
  >
    <div
      class="flex-v"
      v-for="(item,index) in stationList"
      :key="index"
      style="width:10rem;height:4.666667rem;"
      @click="pushToStationDetailPage(item)"
    >
      <!--站点包裹层-->
      <div class="flex-h flex-hsb flex-vc xb_border_bottom ddd station-wrapper">
        <i class="icon iconfont icon-station baseColorNoAcitve"></i>
        <span class="flex1 flex-hs">{{item.STATIONNAME}}</span>
        <span>距您{{item.DISTANCE|distanceFilter}}</span>
      </div>
      <div class="busline-wrapper">
        <!--线路名-->
        <span
          v-for="(bus,index) in item.BUSES"
          :key="index"
        >{{bus.BUS_NAME|lineNameFilter}}</span>
      </div>
    </div>
  </slick>
</template>

<script>
import Slick from 'vue-slick'
export default {
  components: {
    Slick
  },
  data() {
    return {
      slickOptions: {// slick组件的选项
        arrows: false,
        centerMode: true,
        dots: true,
        centerPadding: '0px',
        infinite: true
      },
      show: false
    }
  },

  computed: {
    stationList() { // 计算属性，附近站点列表
      return this.$store.getters.stationList
    },
    selectedStation() { // 计算属性，选中的站点信息
      return this.$store.getters.selectedStation
    }
  },
  watch: {
    stationList(station) { // 监听器，附近站点列表，构建vue-slick
      if (station && station.length > 0) {
        this.show = true
      }
    },
    selectedStation(extData) { // 监听器，选中的站点，切换vue-slick
      this.handleStationInAMapChanged(extData)
    }

  },
  methods: {
    handleAfterChange(event, slick, currentSlide) { // 滑动后监听
      this.updateSelectedStationInStore(this.stationList[currentSlide])
    },
    handleInit() { // vue-slick初始化完成监听,将第一个站点信息更新进store
      this.updateSelectedStationInStore(this.stationList[0])
    },
    updateSelectedStationInStore(station) { // 切换vue-slick后，将当前展示的站点信息更新到store中
      this.$store.dispatch('fetchSelectedStation', station)
    },
    handleStationInAMapChanged(extData) { // 处理store中的站点信息发生变更，并切换当前vue-slick的展示索引
      let index = this.stationList.findIndex(station => station === extData)
      if (index !== this.$refs.slick.currentSlide) { this.$refs.slick.goTo(index) }
    },
    pushToStationDetailPage(station) { // 跳转到线路详情页面
      // TODO  跳转到线路详情页面
      let params = `NAME=${station.STATIONNAME}&ID=${station.STATION_ID}&START_LOACTION_LNG=${station.LONGITUDE}&START_LOACTION_LAT=${station.LATITUDE}`
      let url = 'xbapp://open/bus-app/StationDetails.html?_tv=false&' + params
      if (window.prodInApp) {
        window.location.assign(url)
      } else {
        console.log('~~~goToStationDetail~~~', url)
      }
    }
  },
  filters: {
    distanceFilter: function (distance) { // 距离过滤器
      let distanceStr
      if (distance > 1000) { // 大于1000米，进行x公里的显示处理逻辑
        let kd = distance / 1000
        if (kd <= 10) { // 小于10公里，显示x公里
          distanceStr = kd + '公里'
        } else { // 大于10公里，显示超过10公里
          distanceStr = '超过10公里'
        }
      } else { // 小于1公里，直接显示x米
        distanceStr = distance + '米'
      }
      return distanceStr
    },
    lineNameFilter(lineName) { // 线路名过滤器
      if (escape(lineName).indexOf('%u') < 0) {
        // 路线名中如果没有中文则加上路
        return `${lineName}路`
      }
      return lineName
    }
  }

}
</script>
<style scoped>
/*站点包裹层*/
.station-wrapper {
  width: 690px;
  height: 92px;
  margin-left: 30px;
}
/*站点图标*/
.icon-station {
  font-size: 22px; /*no*/
}
/*站点名*/
.station-wrapper > span:first-of-type {
  color: #333333;
  font-size: 16px; /*no*/
  margin-left: 16px;
}
/*站点距离当前位置的距离*/
.station-wrapper > span:last-of-type {
  color: #aaaaaa;
  font-size: 14px; /*no*/
}
/*线路包裹层*/
.busline-wrapper {
  height: 364px;
  overflow-y: auto;
  padding: 16px;
}
/*线路名按钮*/
.busline-wrapper > span {
  text-align: center;
  border: none;
  background: #f9f9f9;
  color: #000;
  font-size: 16px; /*no*/
  border-radius: 32px;
  margin: 16px;
  height: 64px;
  line-height: 64px;
  padding: 0px 32px;
  max-width: 280px; /**最大的宽度限制为280px*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /**最多显示一行*/
  overflow: hidden;
  float: left;
}
</style>
